<template>
  <el-table v-loading="loadingContact" :border="true" :data="list">
    <el-table-column label="电话">
      <template slot-scope="{row}">
        <template v-if="row.edit">
          <el-input v-model="row.tel" class="edit-input" size="mini" />
        </template>
        <span v-else>{{ row.tel }}</span>
      </template>
    </el-table-column>
    <el-table-column label="地址">
      <template slot-scope="{row}">
        <template v-if="row.edit">
          <el-input v-model="row.add" class="edit-input" size="mini" />
        </template>
        <span v-else>{{ row.add }}</span>
      </template>
    </el-table-column>
    <el-table-column label="邮件">
      <template slot-scope="{row}">
        <template v-if="row.edit">
          <el-input v-model="row.mail" class="edit-input" size="mini" />
        </template>
        <span v-else>{{ row.mail }}</span>
      </template>
    </el-table-column>
    <el-table-column align="center" width="200px">
      <template slot="header">
        <el-button type="success" size="mini" @click="confirCreate">
          <i class="el-icon-plus" /> 添加
        </el-button>
      </template>
      <template slot-scope="scope">
        <el-button
          v-if="scope.row.edit"
          type="success"
          size="mini"
          icon="el-icon-circle-check-outline"
          @click="confirmEdit(scope.row)"
        >提交</el-button>
        <el-button
          v-else
          size="mini"
          type="warning"
          icon="el-icon-edit"
          @click="scope.row.edit=!scope.row.edit"
        >编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          @click="handleDelete(scope.$index, scope.row)"
        >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {
  getWuyeContact,
  setWuyeContact,
  createWuyeContact,
  delWuyeContact
} from '@/api/wuye'

export default {
  data() {
    return {
      loadingContact: false,
      list: []
    }
  },
  created() {
    this.fetchContant()
  },
  methods: {
    async fetchContant() {
      this.loadingContact = true
      const { data: list } = await getWuyeContact()
      this.list = list.map(v => {
        this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
        // v.originalOcc = v.occ //  will be used when user click the cancel botton
        return v
      })
      this.loadingContact = false
    },
    async confirCreate() {
      const { data: { id }} = await createWuyeContact(id)
      const params = {
        id: id,
        tel: '新增电话',
        add: '新增地址',
        mail: '新增邮箱',
        edit: true
      }
      this.list.unshift(params)
    },
    async handleDelete(index, row) {
      const result = await delWuyeContact(row.id)
      this.list.splice(index, 1)
      this.$message({
        message: `(${row.id})${result.message}`,
        type: 'success'
      })
    },
    async confirmEdit(row) {
      const { id, tel, add, mail } = row
      const result = await setWuyeContact(id, {
        tel,
        add,
        mail
      })
      const { message, id: newId = id } = result
      row.edit = false
      row.id = newId
      this.$message({
        message: `(${row.id})${message}`,
        type: 'success'
      })
    }
  }
}
</script>
